<template>
  <div>
    <transition>
      <div class="mask" v-show="visible"></div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "",
  props: ["visible"],
};
</script>

<style scoped>
.mask {
  position: fixed;
  left: 20%;
  top: 20%;
  right: 20%;
  bottom: 20%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.v-enter {
  transform: scale(0);
}

.v-enter-active {
  transition: all 2s;
}

.v-enter-to {
  transform: scale(1);
}

.v-leave{
 transform: scale(1);
 border-radius: 0px;
}
.v-leave-active{
  transition: all 2s;
}
.v-leave-to{
 transform: scale(0);
 border-radius:50%;
}
</style>
